<template>
  <div class="about">
    <el-button size="mini" type="primary">主要按钮</el-button>
    <el-button size="small" type="success">主要按钮</el-button>
    <el-button size="medium" :disabled="flag" type="warning">主要按钮</el-button>
    <el-button :plain="true"
    @click="setNumber"
    :loading="flag"
    :disabled="flag"
    type="danger"
    >{{ flag ? "登陆中" : "登录" }}</el-button>
  <!-- row行 col栏-->
  <el-row :gutter="20">
  <el-col :span="6">
  <div style="background: red; height: 20px"></div>
  </el-col>
  <el-col :span="6">
  <div style="background: red; height: 20px"></div>
  </el-col>
  <el-col :span="6" :push="6">
  <div style="background: red; height: 20px"></div>
  </el-col>
 </el-row>
 <i class="el-icon-edit"></i>
<i class="el-icon-plus" style="font-size: 40px;"></i>
<el-radio-group v-model="radio">
<el-radio :label="1">备选项1</el-radio>
<el-radio :label="2">备选项2</el-radio>
<el-radio :label="3">备选项3</el-radio>
<el-radio :label="4">备选项4</el-radio>
</el-radio-group>
<el-button type="primary" @click="getRadio">提交</el-button>

<el-checkbox-group v-model="checkbox">
<el-checkbox label="1">A</el-checkbox>
<el-checkbox label="2">B</el-checkbox>
<el-checkbox label="3">C</el-checkbox>
<el-checkbox label="4" disabled>D</el-checkbox>
<el-checkbox label="5" disabled>E</el-checkbox>
</el-checkbox-group>
<el-button type="primary" @click="getRadio">提交</el-button>
<br/>

<input v-model="value" placeholder="请输入账号" type="text" />
<el-input
style="width: 300px"
v-model="value"
type="password"
suffix-icon="el-icon-date"
prefix-icon="el-icon-search"
clearable>
</el-input>
<el-input-number
v-model="num"
@change="changeNumber"
@blur="changeNumber"	
@focus="changeNumber"
:min="1"
:max="10"
label="描述文字">
</el-input-number>
  </div>
</template>

<script>
export default{
  data(){
    return{
      falg:false,
      radio:1
    };
  },
  methods:{
    setNumber(){
      this.flag = !this.flag;
    },
    getRadio(){
    console.log(this.radio);
    },
    changeNumber(){
      console.log(this.num);
    }
  },
};
</script>